<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="5"><div class="grid-content ">

            </div></el-col>
            <el-col :span="14">
                <div class="grid-content">
                    <div id="myChart" :style="{width: '1200px', height: '600px'}"></div>
                </div>
            </el-col>
            <el-col :span="5"><div class="grid-content"></div></el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Query",
        data(){

            return{
                ruleForm:{
                    name:'',
                },
                dataViews:[],
                confirm:[],
                chartsData:[],
                province:'',
            }
        },

        created() {
            this.chartsMap();
        },

        methods:{
            chartsMap(){
                this.province = this.$route.params.province;
                this.axios.get("http://127.0.0.1:8088/charts", {params: {city: this.province}})
                    .then(res => {
                        this.dataViews = res.data.date;
                        this.confirm = res.data.confirm;
                        let myChart = this.$echarts.init(document.getElementById('myChart'))
                        // 绘制图表
                        myChart.setOption({
                            title: {text: '增长柱形图'},
                            tooltip: {},
                            xAxis: {
                                name:"日期",
                                data: this.dataViews
                            },
                            yAxis: {
                                name:"人数"
                            },
                            series: [{
                                name: '人数',
                                type: 'bar',
                                data: this.confirm,
                            }]
                        });
                    })
                    .catch(err => {
                        console.log("错误数据 " + JSON.stringify(err))
                    })
            },


        }


    }
</script>

<style scoped>

</style>